<template>
    <!-- 只读状态禁用所有事件，对于需要事件的部分，加上类clickable-item，例如：文件上传 -->
    <view :class="readOnly ? 'py-form-disabled' : ''">
        <u--form labelPosition="left" labelWidth="auto" :rules="rules" :model="form" ref="form">
            <u-form-item label="活动名称" prop="name" borderBottom>
                <u--input v-model="form.name" border="none" placeholder="请填写活动名称"></u--input>
            </u-form-item>
            <u-form-item label="活动区域" prop="region" borderBottom @click="regionShow = true;" borderBottom>
                <py-select :data="regionData" v-model="form.region" title="请选择活动区域"></py-select>
            </u-form-item>
            <u-form-item label="活动时间">
                <view style="display: flex;">
                    <py-datetime-picker title="选择日期" mode="date" v-model="form.date1"></py-datetime-picker>
                    <view style="margin: 0 5px; line-height: 24px;">
                        <u--text text="-"></u--text>
                    </view>

                    <py-datetime-picker title="选择时间" mode="time" v-model="form.date2"></py-datetime-picker>
                </view>


            </u-form-item>

            <u-form-item label="即时配送" prop="delivery" borderBottom>
                <u-switch v-model="form.delivery" size="18"></u-switch>
            </u-form-item>

            <u-form-item label="测试数字" prop="testNumber" borderBottom>
                <u-number-box v-model="form.testNumber" :max="10"></u-number-box>
            </u-form-item>

            <u-form-item label="测试选择器" prop="testCascader" borderBottom>
                <py-cascader v-model="form.testCascader" title="测试选择器" :options="cascaderOptions"></py-cascader>
            </u-form-item>

            <u-form-item label="测试滑块" prop="testSlider" borderBottom>
                <u-slider v-model="form.testSlider" showValue style="width: 100%;"></u-slider>
            </u-form-item>

            <u-form-item label="测试时间日期选择器" prop="testDatePicker" borderBottom>

                <py-datetime-picker title="选择日期时间" mode="datetime" v-model="form.testDatePicker"></py-datetime-picker>

            </u-form-item>

            <!-- 由于只读状态也需要点击图片进行放大预览，对于需要点击效果的图片加上clickable-item类 -->
            <!-- 注意：将clickable-item的class加在u-form-item上，在微信小程序上生效 -->
            <!-- 因此将类clickable-item加在py-upload-image组件上 -->
            <u-form-item label="测试文件" prop="testFile" borderBottom>
                <!-- py-upload-image组件设置readOnly属性为true，表示只读状态，会自动隐藏删除和上传按钮 -->
                <!-- #ifdef H5 -->
                <py-upload-image multiple :fileList="form.fileList" :maxCount="10" :readOnly="readOnly"
                    class="clickable-item"></py-upload-image>
                <!-- #endif -->

                <!-- #ifdef APP-PLUS || MP-WEIXIN -->
                <!-- 真机和微信小程序双向绑定失效，通过change方法手动修改fileList值 -->
                <py-upload-image multiple :fileList="form.fileList" :maxCount="10" :readOnly="readOnly"
                    @change="handleUploadImageChange" class="clickable-item"></py-upload-image>
                <!-- #endif -->
            </u-form-item>

            <u-form-item label="测试评分" prop="testRate" borderBottom>
                <!-- u-rate在模拟器演示时，初次点击导致星星置空，之后无法点击 -->
                <!-- 切换到流程图，再切换到表单，也就是控制v-if隐藏与显示后，功能正常 -->
                <!-- 出于上述原因，使用uni-rate -->
                <!-- <u-rate v-model="form.testRate"></u-rate> -->
                <uni-rate v-model="form.testRate" />
            </u-form-item>

            <!-- py-color-picker组件设置readOnly属性为true，表示只读状态，会自动隐藏头部 -->
            <u-form-item label="测试颜色选择器" prop="testColorPicker" borderBottom>
                <py-color-picker v-model="form.testColorPicker" :readOnly="readOnly"
                    class="clickable-item"></py-color-picker>
            </u-form-item>

            <u-form-item label="测试穿梭框" prop="testTransfer" borderBottom labelPosition="top">
                <py-transfer :data="transferData" v-model="form.testTransfer"></py-transfer>
            </u-form-item>

            <u-form-item label="活动性质" prop="type" borderBottom labelPosition="top">
                <view class="py-checkbox-group">
                    <u-checkbox-group v-model="form.type" placement="column">
                        <u-checkbox label="美食/餐厅线上活动" name="美食/餐厅线上活动"></u-checkbox>
                        <u-checkbox label="地推活动" name="地推活动"></u-checkbox>
                        <u-checkbox label="线下主题活动" name="线下主题活动"></u-checkbox>
                        <u-checkbox label="单纯品牌曝光" name="单纯品牌曝光"></u-checkbox>
                    </u-checkbox-group>
                </view>
            </u-form-item>

            <u-form-item label="特殊资源" prop="resource" borderBottom labelPosition="top">
                <view class="py-radio-group">
                    <u-radio-group v-model="form.resource" placement="column">
                        <u-radio shape="circle" label="线上品牌商赞助" name="线上品牌商赞助"></u-radio>
                        <u-radio shape="circle" label="线下场地免费" name="线下场地免费"></u-radio>
                    </u-radio-group>
                </view>


            </u-form-item>

            <u-form-item label="活动形式" prop="desc">
                <u-textarea v-model="form.desc" confirmType="send" autoHeight></u-textarea>
            </u-form-item>

        </u--form>

    </view>

</template>
<script>
    export default {
        // 微信小程序解除样式隔离
        // #ifdef MP-WEIXIN
        options: {
            styleIsolation: "shared"
        },
        // #endif
        data() {
            const generateData = _ => {
                const data = [];
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: `备选项 ${i}`,
                        disabled: i % 4 === 0
                    });
                }
                return data;
            };
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    testNumber: 0,
                    testCascader: undefined,
                    testSlider: 0,
                    testDatePicker: undefined,
                    testRate: undefined,
                    testColorPicker: undefined,
                    testTransfer: undefined,
                    resource: '',
                    desc: '',
                    fileList: []
                },
                rules: {
                    // name: [
                    //     { required: true, message: '请输入活动名称', trigger: 'blur' },
                    //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    // ],
                    // region: [
                    //     { required: true, message: '请选择活动区域', trigger: 'change' }
                    // ],
                    // date1: [
                    //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    // ],
                    // date2: [
                    //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    // ],
                    // type: [
                    //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    // ],
                    // resource: [
                    //     { required: true, message: '请选择活动资源', trigger: 'change' }
                    // ],
                    // desc: [
                    //     { required: true, message: '请填写活动形式', trigger: 'blur' }
                    // ]
                },

                // 区域数据数组
                regionData: [
                    {
                        name: "区域一",
                        value: "shanghai"
                    },
                    {
                        name: "区域二",
                        value: "beijing"
                    }
                ],

                cascaderOptions: [{
                    value: 'zhinan',
                    label: '指南',
                    children: [{
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [{
                            value: 'yizhi',
                            label: '一致'
                        }, {
                            value: 'fankui',
                            label: '反馈'
                        }, {
                            value: 'xiaolv',
                            label: '效率'
                        }, {
                            value: 'kekong',
                            label: '可控'
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        children: [{
                            value: 'cexiangdaohang',
                            label: '侧向导航'
                        }, {
                            value: 'dingbudaohang',
                            label: '顶部导航'
                        }]
                    }]
                }, {
                    value: 'zujian',
                    label: '组件',
                    children: [{
                        value: 'basic',
                        label: 'Basic',
                        children: [{
                            value: 'layout',
                            label: 'Layout 布局'
                        }, {
                            value: 'color',
                            label: 'Color 色彩'
                        }, {
                            value: 'typography',
                            label: 'Typography 字体'
                        }, {
                            value: 'icon',
                            label: 'Icon 图标'
                        }, {
                            value: 'button',
                            label: 'Button 按钮'
                        }]
                    }, {
                        value: 'form',
                        label: 'Form',
                        children: [{
                            value: 'radio',
                            label: 'Radio 单选框'
                        }, {
                            value: 'checkbox',
                            label: 'Checkbox 多选框'
                        }, {
                            value: 'input',
                            label: 'Input 输入框'
                        }, {
                            value: 'input-number',
                            label: 'InputNumber 计数器'
                        }, {
                            value: 'select',
                            label: 'Select 选择器'
                        }, {
                            value: 'cascader',
                            label: 'Cascader 级联选择器'
                        }, {
                            value: 'switch',
                            label: 'Switch 开关'
                        }, {
                            value: 'slider',
                            label: 'Slider 滑块'
                        }, {
                            value: 'time-picker',
                            label: 'TimePicker 时间选择器'
                        }, {
                            value: 'date-picker',
                            label: 'DatePicker 日期选择器'
                        }, {
                            value: 'datetime-picker',
                            label: 'DateTimePicker 日期时间选择器'
                        }, {
                            value: 'upload',
                            label: 'Upload 上传'
                        }, {
                            value: 'rate',
                            label: 'Rate 评分'
                        }, {
                            value: 'form',
                            label: 'Form 表单'
                        }]
                    }, {
                        value: 'data',
                        label: 'Data',
                        children: [{
                            value: 'table',
                            label: 'Table 表格'
                        }, {
                            value: 'tag',
                            label: 'Tag 标签'
                        }, {
                            value: 'progress',
                            label: 'Progress 进度条'
                        }, {
                            value: 'tree',
                            label: 'Tree 树形控件'
                        }, {
                            value: 'pagination',
                            label: 'Pagination 分页'
                        }, {
                            value: 'badge',
                            label: 'Badge 标记'
                        }]
                    }, {
                        value: 'notice',
                        label: 'Notice',
                        children: [{
                            value: 'alert',
                            label: 'Alert 警告'
                        }, {
                            value: 'loading',
                            label: 'Loading 加载'
                        }, {
                            value: 'message',
                            label: 'Message 消息提示'
                        }, {
                            value: 'message-box',
                            label: 'MessageBox 弹框'
                        }, {
                            value: 'notification',
                            label: 'Notification 通知'
                        }]
                    }, {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [{
                            value: 'menu',
                            label: 'NavMenu 导航菜单'
                        }, {
                            value: 'tabs',
                            label: 'Tabs 标签页'
                        }, {
                            value: 'breadcrumb',
                            label: 'Breadcrumb 面包屑'
                        }, {
                            value: 'dropdown',
                            label: 'Dropdown 下拉菜单'
                        }, {
                            value: 'steps',
                            label: 'Steps 步骤条'
                        }]
                    }, {
                        value: 'others',
                        label: 'Others',
                        children: [{
                            value: 'dialog',
                            label: 'Dialog 对话框'
                        }, {
                            value: 'tooltip',
                            label: 'Tooltip 文字提示'
                        }, {
                            value: 'popover',
                            label: 'Popover 弹出框'
                        }, {
                            value: 'card',
                            label: 'Card 卡片'
                        }, {
                            value: 'carousel',
                            label: 'Carousel 走马灯'
                        }, {
                            value: 'collapse',
                            label: 'Collapse 折叠面板'
                        }]
                    }]
                }, {
                    value: 'ziyuan',
                    label: '资源',
                    children: [{
                        value: 'axure',
                        label: 'Axure Components'
                    }, {
                        value: 'sketch',
                        label: 'Sketch Templates'
                    }, {
                        value: 'jiaohu',
                        label: '组件交互文档'
                    }]
                }],

                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],

                transferData: generateData(),

                // 活动区域弹框是否显示
                regionShow: false
            }
        },
        props: {
            // 是否为只读状态
            readOnly: {
                type: Boolean,
                default: false
            },
            // 表单数据，
            formData: {
                type: Object,
                default: undefined
            }
        },
        created() {
            if (this.formData) {
                this.form = this.formData;
            }

        },
        onReady() {
            // 设置规则
            this.$refs.form.setRules(this.rules);
        },
        methods: {
            // #ifdef APP-PLUS || MP-WEIXIN
            // 真机和微信小程序双向绑定失效，手动设置
            handleUploadImageChange(fileList) {
                this.form.fileList = fileList;
            },
            // #endif

            // 表单重置
            reset() {
                // 重置显示标签
                this.selectDateTagShow = true;
                this.dateTagText = "";

                this.selectTimeTagShow = true;
                this.timeTagText = "";

                this.selectDateTimeTagShow = true;
                this.dateTimeTagText = "";

                this.selectColorTagShow = true;

                this.form = {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    testNumber: 0,
                    testCascader: undefined,
                    testSlider: 0,
                    testDatePicker: undefined,
                    testRate: undefined,
                    testColorPicker: undefined,
                    testTransfer: undefined,
                    resource: '',
                    desc: '',
                    fileList: []
                };
                this.resetForm("form");
            },

            // 表单提交
            submitForm() {
                // 由于不设置规则时，调用validate函数报错，而进行如下判断。
                // 此方式不论是否设置规则，都不报错，可以根据实际情况进行修改。
                let currentForm = this.$refs["form"];
                let currentRules = currentForm.rules;
                let rulesKeyList = Object.keys(currentRules);
                // 如果设置规则，验证规则成功后保存。如果没有设置规则，直接保存。
                if (rulesKeyList.length) {
                    currentForm.validate().then(valid => {
                        if (valid) {
                            uni.$emit("saveForm", this.form);
                        }
                    });
                } else {
                    uni.$emit("saveForm", this.form);
                }
            },

        },
    }
</script>
<style lang="css" scoped>
    /* 标签居中显示 */
    /deep/ .u-tag {
        justify-content: center;
    }

    /* 多选框间距设置 */
    .py-checkbox-group /deep/ .u-checkbox {
        margin-top: 10rpx;
    }

    /* 单选框间距设置 */
    .py-radio-group /deep/ .u-radio {
        margin-top: 10rpx;
    }
</style>